<template>
  <div class="video">
    <div class="videoTop">
      <span
        class="iconfont icon-fanhuipt icona"
        @click="$router.go(-1)"
      ></span>
    </div>
    <div class="videoBottom">
      <div class="videoS" @click="toggleplay">
        <!-- 视频 -->
        <video
          autoplay
          controller
          ref="video"
          height="180"
          width="100%"
          :src="videos"
          @loadeddata="loadeddataFun"
        ></video>
        <span
          :class="[
            'iconfont',
            flag ? 'icon-zantingtingzhi-copy' : 'icon-bofang',
          ]"
          @click="videoPlay"
        ></span>
      </div>

      <div class="videoVan">
        <!-- <div class="range"> -->
        <div class="bar">
          <span class="timeLeft">{{ timeLeft | playerTime }}</span>
          <van-slider
            @change="sliderchange"
            v-model="value"
            inactive-color="#514E4C"
            bar-height="4px"
            active-color="#ee0a24"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <span class="timeRight">{{ timeRight | playerTime }}</span>
        </div>
        <!-- </div> -->
        <div
          :class="[
            'shouchang',
            'iconfont',
            sc ? '.icon-xihuan-kongpt-wangyiicon' : 'icon-xihuan-wangyiicon',
          ]"
          @click="shouchang"
        ></div>

        <div class="icon">
          <span class="iconfont icon-dianzan_kuai"></span>
        </div>
      </div>
      <!-- <div></div> -->
    </div>
  </div>
</template>

<script>
import { getMvUrl } from "../../api/singer";
export default {
  data() {
    return {
      // displays:false,
      flag: true, //播放
      videos: "", //视频链接
      clearset: null, //定时器
      sc: true, //收藏
      timeRight: 0, //右侧时间
      timeLeft: 0, //左侧时间
      value: 0, //滚动条 0-100
    };
  },
  methods: {
    // 点击显示
    // videoBtn(){
    //     if(this.displays){
    //       this.displays = false;
    //     }else{
    //       this.displays = true;
    //     }
    // },
    //收藏
    shouchang() {
      if (this.sc) {
        this.sc = false;
      } else {
        this.sc = true;
      }
    },
    //开关按键
    videoPlay() {
      if (this.flag) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    //播放开关
    toggleplay() {
      if (this.flag) {
        this.$refs.video.play();

        clearInterval(this.clearset); //清除定时器
        this.clearset = setInterval(() => {
          let currentTime = this.$refs.video.currentTime; //实时变化时间
          let duration = this.$refs.video.duration; //总时间
          this.timeLeft = currentTime;
          // 计算滚动条值
          this.value = (currentTime / duration) * 100;
          if (this.value == 100) {
            clearInterval(this.clearset);
            this.$refs.video.pause(); //暂停音乐
            this.flag = true;
          }
        }, 999);
      } else {
        this.$refs.video.pause();
        clearInterval(this.clearset);
      }
    },
    loadeddataFun() {
      // this.toggleplay(); //自动播放
      let duration = this.$refs.video.duration;
      this.timeRight = duration;
      // console.log(this.timeRight);
    },
    sliderchange() {
      var duration = (this.$refs.video.duration * this.value) / 100;
      this.timeLeft = duration; //修改页面数据
      this.$refs.video.currentTime = duration; //修改播放时间
    },
  },
  created() {
    //获取视频url
    getMvUrl({ id: this.$route.query.id }).then((data) => {
      // console.log(data);
      this.videos = data.data.url;

      // console.log(this.videos);
    });
  },

  watch: {},
  filters: {
    playerTime(data) {
      // console.log(data);
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); // 01
      }
    },
  },
};
</script>

<style lang="less">
.main {
  width: 100%;
  height: 100%;
}
.video {
  width: 100%;
  height: 100%;
  // height: 667px;
  background-color: black;
  .videoTop {
    padding: 11px;
    .iconfont {
      font-size: 18px;
      color: #fff;
    }
  }
  .videoBottom {
    width: 100%;

    .videoS {
      width: 100%;
      height: 180px;
      margin-top: 150px;
      position: relative;

      .iconfont {
        display: inline-block;
        color: rgba(255, 255, 255, 0.8);
        font-size: 52px;
        position: absolute;
        top: 50px;
        left: 45%;
        // display: none;
      }
    }

    .videoVan {
      // margin-top: 250px;
      position: relative;
      top: 250px;
      bottom: 110px;
      left: 0px;
      text-align: center;
      color: #fff;
      .icon {
        position: absolute;
        top: 50px;
        right: 20px;
        color: #fff;
        font-size: 16px;
        // z-index: 10;
      }

      .bar {
        width: 50%;
        margin: auto;
        position: relative;
        font-size: 14px;
        .timeLeft {
          position: absolute;
          left: -40px;
          top: -6px;
        }
        .timeRight {
          position: absolute;
          right: -40px;
          top: -6px;
        }
      }
      .icon-shouchang {
        position: absolute;
        top: -5px;
        right: 20px;
        font-size: 16px;
      }
      .icon-shoucang {
        position: absolute;
        top: -9px;
        right: 16px;
        font-size: 24px;
        color: red;
      }
    }
  }
}
// .videoS:active .iconfont{
//   display: block;
// }

// .mini-player{
//   display: none;
// }
</style>